<template>
    <div>
        <!-- <div v-ellipsise="{row:1,width:'180px'}">{{info}}</div> -->
        <div v-waterMark="{content:'版权属于蜗牛学苑'}" class="box">
            Hello My Name is Giles
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            info:'比快更快？PK狂飙超跑、秒速拧魔方，顶配轻薄本疾速「运行」挑战'
        }
    },
    directives:{
       ellipsise:{
         /*
            el:绑定自定义指令的DOM元素
         */
         bind(el,bindings,vNode,oldVNode){
           // width:100px;
            //overflow : hidden;/*必须结合的属性,当内容溢出元素框时发生的事情*/
            //text-overflow: ellipsis;/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
           // display: -webkit-box;/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
            //-webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数。*/
            //-webkit-box-orient: vertical;/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/ 
            el.style.width=bindings.value.width
            el.style.overflow="hidden"
            el.style['text-overflow']="ellipsis"
            el.style.display="-webkit-box"
            el.style['-webkit-line-clamp']=bindings.value.row
            el.style['-webkit-box-orient']="vertical"
         }
       } 
    }
}
</script>

<style>
    .box{
        width: 700px;
        height: 500px;
    }
</style>